<template>
  <div class="warp">
    <PageHeader
      @search="searchList"
      @add="addHandle"
      :sexOptions="sexOptions"
      :roleOptions="roleOptions"
    ></PageHeader>

    <PageTable
      :data="tableData"
      @edit="editHandle"
      @search="searchList"
    ></PageTable>
	
    <pageFooter :pageOption="{page: params.page, pagesize: params.pagesize, total}" @search="searchList"></pageFooter>
  </div>
  
  <addDialog
    ref="addDialogRef"
    :sexOptions="sexOptions"
    :roleOptions="roleOptions"
    @search="searchList"
  ></addDialog>
</template>

<script setup name="user">
import { ref, reactive, toRaw } from "vue";
import {
  Search,
  Plus,
  Delete,
  Edit,
  Upload,
  Pointer,
} from "@element-plus/icons-vue";
import PageHeader from "./PageHeader.vue";
import PageTable from "./PageTable.vue";
import PageFooter from "./PageFooter.vue";
import addDialog from "./addDialog.vue";
import { useUserStore } from "@/stores/user";
import { useMessage } from "@/hooks/message";
import {
  getUserListApi,
  addUserApi,
  updateUserApi,
  delUserApi,
  getRoleOptionApi,
  getSexOptionApi,
} from "@/api/user";
import {filterKeyNull} from '@/utils/index';
import moment from "moment";

const message = useMessage();
const userStore = useUserStore();
const addDialogRef = ref(null);
const roleOptions = ref([]);
const sexOptions = ref([]);
let params = reactive({
	page: 1,
	pagesize: 10,
})
const total = ref(0);
const tableData = ref([]);

// 查询列表
const searchList = (option = {}) => {
  console.log("search---->", option);
	// params = Object.assign(params, option)
	params = { ...params, ...option };
	params = filterKeyNull(params)
	console.log("search--api-->", params);

	getUserListApi(params).then((res) => {
		tableData.value = res.data.map((row) => {
		row.sexTxt = sexOptions.value.find((val) => val.id == row.sex)?.label;
		row.roleTxt = roleOptions.value.find((val) => val.id == row.role)?.label;
		row.createdAt = moment(res.createdAt).format("YYYY-MM-DD HH:mm:ss");
		row.updatedAt = moment(res.updatedAt).format("YYYY-MM-DD HH:mm:ss");
		return row;
	});

    total.value = res.total;
  });
};
searchList();

const addHandle = (option) => {
  addDialogRef.value.show({ title: "新增" });
};

const editHandle = (option) => {
  addDialogRef.value.show({ title: "编辑", form: option });
};

// 获取角色options
getRoleOptionApi().then((res) => {
  roleOptions.value = res.data;
});

// 获取性别options
getSexOptionApi().then((res) => {
  sexOptions.value = res.data;
});
</script>

<style lang="less" scoped>
.warp {
}
</style>
